<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>后代选择器</title>

        <style type="text/css">
            
            /* class selector */
            .wrapper { border: 2px solid red ; margin: 25px auto ; }

            /* Descendant combinator ( 后代组合器 就是我们说的 后代选择器 )*/
            .wrapper div {
                margin: 15px ;
                border: 2px dotted blue ;
            }

            /* Descendant combinator */
            .wrapper .inner {
                height: 50px ;
            }

            /* Child combinator ( 直接子代组合器 就是我们说的 亲子选择器 )*/
            .first>div { border-color: green ; }
        </style>
    </head>
    <body>

        <div class="wrapper first">
            <div class="middle">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
            <div class="middle">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
        </div>

        <div class="wrapper second">
            <div class="middle">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
            <div class="middle">
                <div class="inner"></div>
                <div class="inner"></div>
                <div class="inner"></div>
            </div>
        </div>
        
    </body>
</html>